<template>
  <div class="vip-info-page">
    <div class="container">
      <!-- 页面头部 -->
      <div class="page-header">
        <h1 class="page-title">VIP权益说明</h1>
        <p class="page-subtitle">了解VIP会员特权，享受更好的阅读体验</p>
        
        <!-- 当前VIP状态 -->
        <div v-if="userStore.user" class="current-vip-status">
          <div v-if="isVipActive" class="vip-status-card active">
            <div class="status-icon">
              <svg width="24" height="24" viewBox="0 0 24 24" fill="currentColor">
                <path d="M12 2L13.09 8.26L19.82 7.59L14.23 12.34L15.64 18.36L12 15.54L8.36 18.36L9.77 12.34L4.18 7.59L10.91 8.26L12 2Z"/>
              </svg>
            </div>
            <div class="status-content">
              <h3 class="status-title">您当前是{{ userStore.user.vip_type === 'yearly' ? '年度' : '月度' }}VIP会员</h3>
              <p class="status-info">到期时间：{{ formatExpireDate }}</p>
              <div class="status-badge">{{ userStore.user.vip_type === 'yearly' ? '年度会员' : '月度会员' }}</div>
            </div>
          </div>
          <div v-else class="vip-status-card inactive">
            <div class="status-icon">
              <svg width="24" height="24" viewBox="0 0 24 24" fill="currentColor">
                <path d="M12 2C13.1 2 14 2.9 14 4C14 5.1 13.1 6 12 6C10.9 6 10 5.1 10 4C10 2.9 10.9 2 12 2Z"/>
              </svg>
            </div>
            <div class="status-content">
              <h3 class="status-title">您还不是VIP会员</h3>
              <p class="status-info">开通VIP享受更多特权，畅读所有VIP章节</p>
              <div class="status-badge">普通用户</div>
            </div>
          </div>
        </div>
      </div>

      <!-- VIP权益卡片 -->
      <div class="benefits-grid">
        <div class="benefit-card highlight">
          <div class="card-icon">
            <svg width="48" height="48" viewBox="0 0 24 24" fill="currentColor">
              <path d="M12 2L13.09 8.26L19.82 7.59L14.23 12.34L15.64 18.36L12 15.54L8.36 18.36L9.77 12.34L4.18 7.59L10.91 8.26L12 2Z"/>
            </svg>
          </div>
          <h3 class="card-title">VIP章节免费</h3>
          <p class="card-description">
            所有VIP会员可以免费阅读标有"VIP"标识的付费章节，无需消耗书币
          </p>
          <div class="card-badge">核心特权</div>
        </div>

        <div class="benefit-card">
          <div class="card-icon">
            <svg width="48" height="48" viewBox="0 0 24 24" fill="currentColor">
              <path d="M12 2C13.1 2 14 2.9 14 4C14 5.1 13.1 6 12 6C10.9 6 10 5.1 10 4C10 2.9 10.9 2 12 2ZM21 9V7L15 3L13.5 4.5L16.5 7.5H7.5L10.5 4.5L9 3L3 7V9H21ZM3 19H21V21H3V19Z"/>
            </svg>
          </div>
          <h3 class="card-title">优先更新</h3>
          <p class="card-description">
            VIP用户优先获得最新章节更新推送，第一时间享受精彩内容
          </p>
        </div>

        <div class="benefit-card">
          <div class="card-icon">
            <svg width="48" height="48" viewBox="0 0 24 24" fill="currentColor">
              <path d="M19 3H5C3.9 3 3 3.9 3 5V19C3 20.1 3.9 21 5 21H19C20.1 21 21 20.1 21 19V5C21 3.9 20.1 3 19 3ZM19 19H5V5H19V19ZM17 10H7V12H17V10ZM13 14H7V16H13V14Z"/>
            </svg>
          </div>
          <h3 class="card-title">无广告阅读</h3>
          <p class="card-description">
            享受纯净的阅读环境，摆脱广告干扰，专注沉浸式阅读体验
          </p>
        </div>

        <div class="benefit-card">
          <div class="card-icon">
            <svg width="48" height="48" viewBox="0 0 24 24" fill="currentColor">
              <path d="M12 2L15.09 8.26L22 9.27L17 14.14L18.18 21.02L12 17.77L5.82 21.02L7 14.14L2 9.27L8.91 8.26L12 2Z"/>
            </svg>
          </div>
          <h3 class="card-title">专属标识</h3>
          <p class="card-description">
            获得独特的VIP标识和专属头像框，彰显尊贵身份
          </p>
        </div>
      </div>

      <!-- 章节访问规则 -->
      <div class="rules-section">
        <h2 class="section-title">章节访问规则</h2>
        
        <div class="rules-grid">
          <div class="rule-card vip-rule">
            <div class="rule-header">
              <div class="rule-icon vip">
                <svg width="24" height="24" viewBox="0 0 24 24" fill="currentColor">
                  <path d="M12 2L13.09 8.26L19.82 7.59L14.23 12.34L15.64 18.36L12 15.54L8.36 18.36L9.77 12.34L4.18 7.59L10.91 8.26L12 2Z"/>
                </svg>
              </div>
              <h3 class="rule-title">VIP用户</h3>
            </div>
            <div class="rule-content">
              <div class="access-item">
                <span class="chapter-type free">免费章节</span>
                <span class="access-status">✅ 免费阅读</span>
              </div>
              <div class="access-item">
                <span class="chapter-type vip">VIP章节</span>
                <span class="access-status">✅ 免费阅读</span>
              </div>
              <div class="access-item">
                <span class="chapter-type premium">付费章节</span>
                <span class="access-status">✅ 无需书币</span>
              </div>
            </div>
          </div>

          <div class="rule-card normal-rule">
            <div class="rule-header">
              <div class="rule-icon normal">
                <svg width="24" height="24" viewBox="0 0 24 24" fill="currentColor">
                  <path d="M12 2C13.1 2 14 2.9 14 4C14 5.1 13.1 6 12 6C10.9 6 10 5.1 10 4C10 2.9 10.9 2 12 2Z"/>
                </svg>
              </div>
              <h3 class="rule-title">普通用户</h3>
            </div>
            <div class="rule-content">
              <div class="access-item">
                <span class="chapter-type free">免费章节</span>
                <span class="access-status">✅ 免费阅读</span>
              </div>
              <div class="access-item">
                <span class="chapter-type vip">VIP章节</span>
                <span class="access-status">💰 需要书币</span>
              </div>
              <div class="access-item">
                <span class="chapter-type premium">付费章节</span>
                <span class="access-status">💰 消耗书币</span>
              </div>
            </div>
          </div>
        </div>
      </div>

      <!-- 价格方案 -->
      <div class="pricing-section">
        <h2 class="section-title">VIP套餐价格</h2>
        
        <div class="pricing-grid">
          <div class="pricing-card monthly">
            <div class="plan-header">
              <h3 class="plan-name">月度VIP</h3>
              <div class="plan-price">
                <span class="currency">¥</span>
                <span class="amount">15</span>
                <span class="period">/月</span>
              </div>
            </div>
            <ul class="plan-features">
              <li>所有VIP章节免费阅读</li>
              <li>无广告纯净阅读</li>
              <li>优先更新推送</li>
              <li>专属VIP标识</li>
            </ul>
            <button class="btn primary plan-btn" @click="openPaymentDialog('monthly')" :disabled="getButtonDisabled('monthly')">
              {{ getButtonText('monthly') }}
            </button>
          </div>

          <div class="pricing-card yearly recommended">
            <div class="recommend-badge">推荐</div>
            <div class="plan-header">
              <h3 class="plan-name">年度VIP</h3>
              <div class="plan-price">
                <span class="currency">¥</span>
                <span class="amount">128</span>
                <span class="period">/年</span>
              </div>
              <div class="plan-savings">节省52元</div>
            </div>
            <ul class="plan-features">
              <li>所有VIP章节免费阅读</li>
              <li>无广告纯净阅读</li>
              <li>优先更新推送</li>
              <li>专属VIP标识</li>
              <li>赠送200书币</li>
              <li>专属客服支持</li>
            </ul>
            <button class="btn primary plan-btn" @click="openPaymentDialog('yearly')" :disabled="getButtonDisabled('yearly')">
              {{ getButtonText('yearly') }}
            </button>
          </div>
        </div>
      </div>

      <!-- 常见问题 -->
      <div class="faq-section">
        <h2 class="section-title">常见问题</h2>
        
        <div class="faq-list">
          <div class="faq-item">
            <div class="faq-question" @click="toggleFaq(0)">
              <span>VIP会员可以阅读所有付费章节吗？</span>
              <svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor" :class="{ active: activeFaq === 0 }">
                <path d="M7.41 8.59L12 13.17L16.59 8.59L18 10L12 16L6 10L7.41 8.59Z"/>
              </svg>
            </div>
            <transition name="fade">
              <div v-show="activeFaq === 0" class="faq-answer">
                是的，VIP会员可以免费阅读所有标有"VIP"标识的付费章节，无需消耗任何书币。这是VIP会员的核心特权。
              </div>
            </transition>
          </div>

          <div class="faq-item">
            <div class="faq-question" @click="toggleFaq(1)">
              <span>普通用户如何阅读VIP章节？</span>
              <svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor" :class="{ active: activeFaq === 1 }">
                <path d="M7.41 8.59L12 13.17L16.59 8.59L18 10L12 16L6 10L7.41 8.59Z"/>
              </svg>
            </div>
            <transition name="fade">
              <div v-show="activeFaq === 1" class="faq-answer">
                普通用户需要消耗相应的书币来解锁VIP章节。每个章节的价格会在章节标题旁显示。购买后可以永久阅读该章节。
              </div>
            </transition>
          </div>

          <div class="faq-item">
            <div class="faq-question" @click="toggleFaq(2)">
              <span>已购买的章节是否会过期？</span>
              <svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor" :class="{ active: activeFaq === 2 }">
                <path d="M7.41 8.59L12 13.17L16.59 8.59L18 10L12 16L6 10L7.41 8.59Z"/>
              </svg>
            </div>
            <transition name="fade">
              <div v-show="activeFaq === 2" class="faq-answer">
                不会过期。一旦购买了某个章节，您就可以永久阅读该章节，即使取消VIP会员也不会影响已购买章节的阅读权限。
              </div>
            </transition>
          </div>

          <div class="faq-item">
            <div class="faq-question" @click="toggleFaq(3)">
              <span>VIP会员到期后会发生什么？</span>
              <svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor" :class="{ active: activeFaq === 3 }">
                <path d="M7.41 8.59L12 13.17L16.59 8.59L18 10L12 16L6 10L7.41 8.59Z"/>
              </svg>
            </div>
            <transition name="fade">
              <div v-show="activeFaq === 3" class="faq-answer">
                VIP会员到期后，您将无法免费阅读新的VIP章节，需要使用书币购买。但是在VIP期间阅读过的章节仍然可以继续阅读。
              </div>
            </transition>
          </div>
        </div>
      </div>
    </div>

    <!-- 支付弹窗 -->
    <div v-if="showPaymentDialog" class="payment-overlay" @click="closePaymentDialog">
      <div class="payment-dialog" @click.stop>
        <div class="dialog-header">
          <h3>开通VIP会员</h3>
          <button class="close-btn" @click="closePaymentDialog">
            <svg width="24" height="24" viewBox="0 0 24 24" fill="currentColor">
              <path d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z"/>
            </svg>
          </button>
        </div>

        <div class="dialog-content">
          <!-- 选中的套餐信息 -->
          <div class="selected-plan">
            <div class="plan-info">
              <h4>{{ selectedPlan?.name }}</h4>
              <div class="plan-price">
                <span class="amount">¥{{ selectedPlan?.price }}</span>
                <span class="period">{{ selectedPlan?.period }}</span>
              </div>
              <div class="plan-benefits">
                <span v-for="benefit in selectedPlan?.benefits" :key="benefit" class="benefit-tag">
                  {{ benefit }}
                </span>
              </div>
            </div>
          </div>

          <!-- 支付方式选择 -->
          <div class="payment-methods">
            <h4>选择支付方式</h4>
            <div class="payment-method-list">
              <div 
                v-for="method in paymentMethods" 
                :key="method.id"
                class="payment-method"
                :class="{ active: selectedPaymentMethod === method.id }"
                @click="selectedPaymentMethod = method.id"
              >
                <div class="method-icon">
                  <img :src="method.icon" :alt="method.name" />
                </div>
                <div class="method-info">
                  <span class="method-name">{{ method.name }}</span>
                  <span class="method-desc">{{ method.description }}</span>
                </div>
                <div class="method-radio">
                  <div class="radio-dot" :class="{ active: selectedPaymentMethod === method.id }"></div>
                </div>
              </div>
            </div>
          </div>

          <!-- 优惠信息 -->
          <div v-if="selectedPlan?.discount" class="discount-info">
            <svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor">
              <path d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z"/>
            </svg>
            <span>{{ selectedPlan.discount }}</span>
          </div>

          <!-- 支付按钮 -->
          <div class="payment-actions">
            <button class="btn secondary" @click="closePaymentDialog">取消</button>
            <button 
              class="btn primary payment-btn" 
              @click="processPayment"
              :disabled="processing || !selectedPaymentMethod"
            >
              <span v-if="processing">处理中...</span>
              <span v-else>立即支付 ¥{{ selectedPlan?.price }}</span>
            </button>
          </div>
        </div>
      </div>
    </div>

    <!-- 支付结果弹窗 -->
    <div v-if="showResultDialog" class="payment-overlay" @click="closeResultDialog">
      <div class="result-dialog" @click.stop>
        <div class="result-content">
          <div class="result-icon" :class="paymentResult.success ? 'success' : 'error'">
            <svg v-if="paymentResult.success" width="48" height="48" viewBox="0 0 24 24" fill="currentColor">
              <path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-1.41 15.09L7 13.5l1.41-1.41L10 13.68l6.59-6.59L18 8.5l-7.41 8.59z"/>
            </svg>
            <svg v-else width="48" height="48" viewBox="0 0 24 24" fill="currentColor">
              <path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm5 11H7v-2h10v2z"/>
            </svg>
          </div>
          <h3>{{ paymentResult.title }}</h3>
          <p>{{ paymentResult.message }}</p>
          <div class="result-actions">
            <button class="btn primary" @click="closeResultDialog">确定</button>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, computed, onMounted } from 'vue'
import { useUserStore } from '@/stores/user'
import { ElMessage } from 'element-plus'
import { 
  getVipPackages, 
  buyVip, 
  getWalletInfo,
  type VipPackage
} from '@/api/payment'

// 响应式数据
const activeFaq = ref<number | null>(null)
const showPaymentDialog = ref(false)
const showResultDialog = ref(false)
const selectedPlanType = ref<'monthly' | 'yearly' | null>(null)
const selectedPaymentMethod = ref<string>('mock')
const processing = ref(false)
const vipPackages = ref<VipPackage[]>([])
const paymentResult = ref({
  success: false,
  title: '',
  message: ''
})

const userStore = useUserStore()

// 计算属性
const selectedPlan = computed(() => {
  if (!selectedPlanType.value) return null
  
  const packageData = vipPackages.value.find(pkg => pkg.type === selectedPlanType.value)
  if (!packageData) return null
  
  return {
    name: packageData.name,
    price: packageData.price,
    period: packageData.duration,
    benefits: packageData.features,
    discount: selectedPlanType.value === 'yearly' ? '限时优惠，相当于每月仅需10.7元' : null
  }
})

// VIP是否有效
const isVipActive = computed(() => {
  if (!userStore.user) return false
  
  const now = new Date()
  return (userStore.user.vip_expires_at && new Date(userStore.user.vip_expires_at) > now) ||
         (userStore.user.vip_expire_date && new Date(userStore.user.vip_expire_date) > now)
})

// 格式化到期日期
const formatExpireDate = computed(() => {
  if (!userStore.user) return ''
  
  const expireDate = userStore.user.vip_expires_at || userStore.user.vip_expire_date
  if (!expireDate) return ''
  
  const date = new Date(expireDate)
  return date.toLocaleDateString('zh-CN', {
    year: 'numeric',
    month: 'long',
    day: 'numeric',
    hour: '2-digit',
    minute: '2-digit'
  })
})

// 支付方式配置
const paymentMethods = [
  {
    id: 'alipay',
    name: '支付宝',
    description: '推荐使用',
    icon: '/icons/alipay.png'
  },
  {
    id: 'wechat',
    name: '微信支付',
    description: '安全便捷',
    icon: '/icons/wechat.png'
  },
  {
    id: 'mock',
    name: '模拟支付',
    description: '测试专用',
    icon: '/icons/test.png'
  }
]

// 加载VIP套餐数据
const loadVipPackages = async () => {
  try {
    const packages = await getVipPackages()
    vipPackages.value = packages
  } catch (error) {
    console.error('加载VIP套餐失败:', error)
    ElMessage.error('加载套餐信息失败')
  }
}

// 刷新用户VIP状态
const refreshUserVipStatus = async () => {
  try {
    const walletInfo = await getWalletInfo()
    if (userStore.user && walletInfo.vipInfo) {
      userStore.user.is_vip = walletInfo.vipInfo.isVip
      userStore.user.vip_expires_at = walletInfo.vipInfo.expiresAt
    }
  } catch (error) {
    console.error('刷新VIP状态失败:', error)
  }
}

// 方法
const toggleFaq = (index: number) => {
  activeFaq.value = activeFaq.value === index ? null : index
}

// 获取按钮是否禁用
const getButtonDisabled = (planType: 'monthly' | 'yearly') => {
  if (!userStore.user) return false
  
  if (!isVipActive.value) return false // 未开通VIP，都可以开通
  
  // 已开通VIP的情况
  if (userStore.user.vip_type === 'yearly') {
    return true // 年度VIP，两个都不能开通
  }
  
  if (userStore.user.vip_type === 'monthly' && planType === 'monthly') {
    return true // 月度VIP不能再开通月度
  }
  
  return false // 月度VIP可以升级到年度
}

// 获取按钮文本
const getButtonText = (planType: 'monthly' | 'yearly') => {
  if (!userStore.user) return '立即开通'
  
  if (!isVipActive.value) return '立即开通' // 未开通VIP
  
  // 已开通VIP的情况
  if (userStore.user.vip_type === 'yearly') {
    return '已是年度VIP会员' // 年度VIP
  }
  
  if (userStore.user.vip_type === 'monthly') {
    if (planType === 'monthly') {
      return '已是月度VIP会员' // 月度VIP不能再开通月度
    } else {
      return '升级到年度VIP' // 月度VIP可以升级到年度
    }
  }
  
  return '立即开通'
}

const openPaymentDialog = (planType: 'monthly' | 'yearly') => {
  if (getButtonDisabled(planType)) {
    return
  }
  
  selectedPlanType.value = planType
  selectedPaymentMethod.value = 'mock'
  showPaymentDialog.value = true
}

const closePaymentDialog = () => {
  showPaymentDialog.value = false
  selectedPlanType.value = null
  selectedPaymentMethod.value = ''
}

const closeResultDialog = () => {
  showResultDialog.value = false
  
  // 如果支付成功，刷新页面或跳转
  if (paymentResult.value.success) {
    refreshUserVipStatus()
  }
}

const processPayment = async () => {
  if (!selectedPlanType.value || !selectedPaymentMethod.value) {
    ElMessage.warning('请选择支付方式')
    return
  }
  
  // 再次检查是否可以开通VIP（防止绕过前端限制）
  if (getButtonDisabled(selectedPlanType.value)) {
    ElMessage.warning('当前VIP状态不允许重复开通')
    showPaymentDialog.value = false
    return
  }
  
  try {
    processing.value = true
    
    // 调用购买VIP API
    const order = await buyVip({
      type: selectedPlanType.value,
      paymentMethod: selectedPaymentMethod.value
    })
    
    // 关闭支付弹窗
    showPaymentDialog.value = false
    
    if (selectedPaymentMethod.value === 'mock') {
      // 模拟支付成功
      paymentResult.value = {
        success: true,
        title: 'VIP开通成功！',
        message: '恭喜您成为VIP会员，现在可以免费阅读所有VIP章节了！'
      }
      showResultDialog.value = true
      
      // 刷新用户状态
      await refreshUserVipStatus()
    } else {
      // 真实支付流程
      ElMessage.info('请完成支付')
      console.log('支付信息:', order)
    }
    
  } catch (error: unknown) {
    console.error('VIP购买失败:', error)
    
    const errorMessage = error instanceof Error ? error.message : 'VIP购买失败'
    
    paymentResult.value = {
      success: false,
      title: '开通失败',
      message: errorMessage
    }
    showResultDialog.value = true
    showPaymentDialog.value = false
  } finally {
    processing.value = false
  }
}

// 生命周期
onMounted(() => {
  loadVipPackages()
})
</script>

<style lang="scss" scoped>
.vip-info-page {
  min-height: 100vh;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  padding: var(--spacing-xl) 0;
}

.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 var(--spacing-lg);
}

// 页面头部
.page-header {
  text-align: center;
  margin-bottom: var(--spacing-xl);
  color: white;

  .page-title {
    font-size: 3rem;
    font-weight: 700;
    margin: 0 0 var(--spacing-md) 0;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
  }

  .page-subtitle {
    font-size: 1.2rem;
    opacity: 0.9;
    margin: 0;
  }
}

// VIP状态显示
.current-vip-status {
  margin-top: var(--spacing-xl);
  max-width: 600px;
  margin-left: auto;
  margin-right: auto;
}

.vip-status-card {
  background: white;
  border-radius: var(--radius-lg);
  padding: var(--spacing-xl);
  display: flex;
  align-items: center;
  gap: var(--spacing-lg);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
  transition: transform 0.3s ease;

  &:hover {
    transform: translateY(-2px);
  }

  &.active {
    background: linear-gradient(135deg, #ff6b6b, #ff8e53);
    color: white;

    .status-icon {
      background: rgba(255, 255, 255, 0.2);
      color: white;
    }

    .status-badge {
      background: rgba(255, 255, 255, 0.2);
      color: white;
    }
  }

  &.inactive {
    background: linear-gradient(135deg, #e3f2fd, #f5f5f5);
    color: var(--text-primary);

    .status-icon {
      background: var(--bg-secondary);
      color: var(--text-secondary);
    }

    .status-badge {
      background: var(--bg-secondary);
      color: var(--text-secondary);
    }
  }

  .status-icon {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
  }

  .status-content {
    flex: 1;
  }

  .status-title {
    font-size: 1.3rem;
    font-weight: 600;
    margin: 0 0 var(--spacing-sm) 0;
  }

  .status-info {
    margin: 0 0 var(--spacing-sm) 0;
    opacity: 0.9;
  }

  .status-badge {
    display: inline-block;
    padding: 4px 12px;
    border-radius: var(--radius-sm);
    font-size: 0.9rem;
    font-weight: 500;
  }
}

// VIP权益卡片
.benefits-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: var(--spacing-lg);
  margin-bottom: var(--spacing-xl);
}

.benefit-card {
  background: white;
  border-radius: var(--radius-lg);
  padding: var(--spacing-xl);
  text-align: center;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  position: relative;
  overflow: hidden;

  &:hover {
    transform: translateY(-4px);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
  }

  &.highlight {
    background: linear-gradient(135deg, #ff6b6b, #ff8e53);
    color: white;
    
    .card-badge {
      background: rgba(255, 255, 255, 0.2);
      color: white;
    }
  }

  .card-icon {
    color: var(--primary-color);
    margin-bottom: var(--spacing-md);

    .highlight & {
      color: white;
    }
  }

  .card-title {
    font-size: 1.5rem;
    font-weight: 600;
    margin: 0 0 var(--spacing-md) 0;
    color: var(--text-primary);

    .highlight & {
      color: white;
    }
  }

  .card-description {
    color: var(--text-secondary);
    line-height: 1.6;
    margin: 0;

    .highlight & {
      color: rgba(255, 255, 255, 0.9);
    }
  }

  .card-badge {
    position: absolute;
    top: var(--spacing-md);
    right: var(--spacing-md);
    background: var(--primary-color);
    color: white;
    padding: 4px 8px;
    border-radius: var(--radius-md);
    font-size: 0.8rem;
    font-weight: 600;
  }
}

// 规则部分
.rules-section,
.pricing-section,
.faq-section {
  background: white;
  border-radius: var(--radius-lg);
  padding: var(--spacing-xl);
  margin-bottom: var(--spacing-xl);
}

.section-title {
  font-size: 2rem;
  font-weight: 600;
  color: var(--text-primary);
  margin: 0 0 var(--spacing-xl) 0;
  text-align: center;
}

.rules-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: var(--spacing-lg);
}

.rule-card {
  border: 2px solid var(--border-color);
  border-radius: var(--radius-lg);
  padding: var(--spacing-lg);
  
  &.vip-rule {
    border-color: #ff6b6b;
    background: linear-gradient(135deg, #ff6b6b08, #ff8e5308);
  }

  .rule-header {
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
    margin-bottom: var(--spacing-lg);

    .rule-icon {
      width: 40px;
      height: 40px;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      color: white;

      &.vip {
        background: linear-gradient(135deg, #ff6b6b, #ff8e53);
      }

      &.normal {
        background: linear-gradient(135deg, #667eea, #764ba2);
      }
    }

    .rule-title {
      font-size: 1.3rem;
      font-weight: 600;
      color: var(--text-primary);
      margin: 0;
    }
  }

  .access-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--spacing-md) 0;
    border-bottom: 1px solid var(--border-color);

    &:last-child {
      border-bottom: none;
    }

    .chapter-type {
      padding: 4px 8px;
      border-radius: var(--radius-sm);
      font-size: 0.9rem;
      font-weight: 500;

      &.free {
        background: #52c41a;
        color: white;
      }

      &.vip {
        background: #ff6b6b;
        color: white;
      }

      &.premium {
        background: #722ed1;
        color: white;
      }
    }

    .access-status {
      font-weight: 500;
      color: var(--text-secondary);
    }
  }
}

// 价格方案
.pricing-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: var(--spacing-lg);
  max-width: 800px;
  margin: 0 auto;
}

.pricing-card {
  border: 2px solid var(--border-color);
  border-radius: var(--radius-lg);
  padding: var(--spacing-xl);
  position: relative;
  transition: transform 0.3s ease, box-shadow 0.3s ease;

  &:hover {
    transform: translateY(-4px);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
  }

  &.recommended {
    border-color: var(--primary-color);
    transform: scale(1.05);

    .recommend-badge {
      position: absolute;
      top: -10px;
      left: 50%;
      transform: translateX(-50%);
      background: var(--primary-color);
      color: white;
      padding: 4px 16px;
      border-radius: var(--radius-md);
      font-size: 0.9rem;
      font-weight: 600;
    }
  }

  .plan-header {
    text-align: center;
    margin-bottom: var(--spacing-lg);

    .plan-name {
      font-size: 1.5rem;
      font-weight: 600;
      margin: 0 0 var(--spacing-md) 0;
      color: var(--text-primary);
    }

    .plan-price {
      display: flex;
      align-items: baseline;
      justify-content: center;
      margin-bottom: var(--spacing-sm);

      .currency {
        font-size: 1.2rem;
        color: var(--text-secondary);
      }

      .amount {
        font-size: 3rem;
        font-weight: 700;
        color: var(--primary-color);
      }

      .period {
        font-size: 1rem;
        color: var(--text-secondary);
      }
    }

    .plan-savings {
      color: #52c41a;
      font-weight: 600;
      font-size: 0.9rem;
    }
  }

  .plan-features {
    list-style: none;
    padding: 0;
    margin: 0 0 var(--spacing-xl) 0;

    li {
      padding: var(--spacing-sm) 0;
      color: var(--text-secondary);
      position: relative;
      padding-left: 24px;

      &::before {
        content: "✓";
        position: absolute;
        left: 0;
        color: #52c41a;
        font-weight: 600;
      }
    }
  }

  .plan-btn {
    width: 100%;
    padding: var(--spacing-md) var(--spacing-lg);
    font-size: 1.1rem;
    font-weight: 600;
  }
}

// 常见问题
.faq-list {
  max-width: 800px;
  margin: 0 auto;
}

.faq-item {
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  margin-bottom: var(--spacing-md);
  overflow: hidden;

  .faq-question {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--spacing-lg);
    cursor: pointer;
    background: var(--bg-secondary);
    transition: background-color 0.3s ease;

    &:hover {
      background: var(--bg-tertiary);
    }

    span {
      font-weight: 500;
      color: var(--text-primary);
    }

    svg {
      transition: transform 0.3s ease;
      color: var(--text-tertiary);

      &.active {
        transform: rotate(180deg);
      }
    }
  }

  .faq-answer {
    padding: var(--spacing-lg);
    color: var(--text-secondary);
    line-height: 1.6;
    border-top: 1px solid var(--border-color);
  }
}

// 过渡动画
.fade-enter-active,
.fade-leave-active {
  transition: opacity 0.3s ease;
}

.fade-enter-from,
.fade-leave-to {
  opacity: 0;
}

// 响应式设计
@media (max-width: 768px) {
  .page-header .page-title {
    font-size: 2rem;
  }

  .benefits-grid,
  .rules-grid,
  .pricing-grid {
    grid-template-columns: 1fr;
  }

  .pricing-card.recommended {
    transform: none;
  }

  .container {
    padding: 0 var(--spacing-md);
  }

  .benefit-card,
  .rules-section,
  .pricing-section,
  .faq-section {
    padding: var(--spacing-lg);
  }
}

// 支付弹窗样式
.payment-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.6);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  backdrop-filter: blur(4px);
}

.payment-dialog,
.result-dialog {
  background: white;
  border-radius: var(--radius-lg);
  max-width: 500px;
  width: 90vw;
  max-height: 80vh;
  overflow-y: auto;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
  animation: dialogSlideIn 0.3s ease;
}

@keyframes dialogSlideIn {
  from {
    opacity: 0;
    transform: translateY(-20px) scale(0.95);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

.dialog-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--spacing-lg);
  border-bottom: 1px solid var(--border-color);

  h3 {
    font-size: 1.5rem;
    font-weight: 600;
    color: var(--text-primary);
    margin: 0;
  }

  .close-btn {
    background: none;
    border: none;
    cursor: pointer;
    color: var(--text-tertiary);
    padding: 4px;
    border-radius: 4px;
    transition: all 0.2s ease;

    &:hover {
      background: var(--bg-tertiary);
      color: var(--text-secondary);
    }
  }
}

.dialog-content {
  padding: var(--spacing-lg);
}

// 选中的套餐信息
.selected-plan {
  background: linear-gradient(135deg, #667eea08, #764ba208);
  border: 1px solid var(--primary-color);
  border-radius: var(--radius-md);
  padding: var(--spacing-lg);
  margin-bottom: var(--spacing-lg);

  .plan-info h4 {
    font-size: 1.3rem;
    font-weight: 600;
    color: var(--text-primary);
    margin: 0 0 var(--spacing-sm) 0;
  }

  .plan-price {
    display: flex;
    align-items: baseline;
    gap: 4px;
    margin-bottom: var(--spacing-md);

    .amount {
      font-size: 2rem;
      font-weight: 700;
      color: var(--primary-color);
    }

    .period {
      color: var(--text-secondary);
    }
  }

  .plan-benefits {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-sm);

    .benefit-tag {
      background: var(--primary-color);
      color: white;
      padding: 4px 8px;
      border-radius: var(--radius-sm);
      font-size: 0.8rem;
      font-weight: 500;
    }
  }
}

// 支付方式选择
.payment-methods {
  margin-bottom: var(--spacing-lg);

  h4 {
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--text-primary);
    margin: 0 0 var(--spacing-md) 0;
  }
}

.payment-method-list {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-sm);
}

.payment-method {
  display: flex;
  align-items: center;
  gap: var(--spacing-md);
  padding: var(--spacing-md);
  border: 2px solid var(--border-color);
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: all 0.2s ease;

  &:hover {
    border-color: var(--primary-color);
    background: var(--bg-secondary);
  }

  &.active {
    border-color: var(--primary-color);
    background: linear-gradient(135deg, #667eea08, #764ba208);
  }

  .method-icon {
    width: 32px;
    height: 32px;
    border-radius: 4px;
    overflow: hidden;
    flex-shrink: 0;

    img {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }
  }

  .method-info {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 2px;

    .method-name {
      font-weight: 600;
      color: var(--text-primary);
    }

    .method-desc {
      font-size: 0.9rem;
      color: var(--text-secondary);
    }
  }

  .method-radio {
    width: 20px;
    height: 20px;
    border: 2px solid var(--border-color);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: border-color 0.2s ease;

    .radio-dot {
      width: 10px;
      height: 10px;
      border-radius: 50%;
      background: var(--primary-color);
      opacity: 0;
      transition: opacity 0.2s ease;

      &.active {
        opacity: 1;
      }
    }
  }

  &.active .method-radio {
    border-color: var(--primary-color);
  }
}

// 优惠信息
.discount-info {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
  background: linear-gradient(135deg, #52c41a08, #73d13d08);
  border: 1px solid #52c41a;
  border-radius: var(--radius-md);
  padding: var(--spacing-md);
  margin-bottom: var(--spacing-lg);
  color: #52c41a;
  font-weight: 500;

  svg {
    flex-shrink: 0;
  }
}

// 支付按钮区域
.payment-actions {
  display: flex;
  gap: var(--spacing-md);
  justify-content: flex-end;

  .btn {
    padding: var(--spacing-md) var(--spacing-lg);
    font-weight: 600;
    min-width: 100px;

    &.payment-btn {
      background: linear-gradient(135deg, var(--primary-color), #764ba2);
      border: none;
      color: white;
      transition: all 0.2s ease;

      &:hover:not(:disabled) {
        transform: translateY(-1px);
        box-shadow: 0 8px 25px rgba(102, 126, 234, 0.3);
      }

      &:disabled {
        opacity: 0.6;
        cursor: not-allowed;
        transform: none;
      }
    }
  }
}

// 支付结果弹窗
.result-dialog {
  max-width: 400px;
}

.result-content {
  text-align: center;
  padding: var(--spacing-xl);

  .result-icon {
    width: 80px;
    height: 80px;
    margin: 0 auto var(--spacing-lg);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;

    &.success {
      background: linear-gradient(135deg, #52c41a, #73d13d);
    }

    &.error {
      background: linear-gradient(135deg, #ff4d4f, #ff7875);
    }
  }

  h3 {
    font-size: 1.5rem;
    font-weight: 600;
    margin: 0 0 var(--spacing-md) 0;
    color: var(--text-primary);
  }

  p {
    color: var(--text-secondary);
    line-height: 1.6;
    margin: 0 0 var(--spacing-xl) 0;
  }

  .result-actions {
    display: flex;
    justify-content: center;

    .btn {
      padding: var(--spacing-md) var(--spacing-xl);
      font-weight: 600;
      min-width: 120px;
    }
  }
}

// 已开通VIP的按钮样式
.plan-btn:disabled {
  background: var(--bg-tertiary) !important;
  color: var(--text-tertiary) !important;
  cursor: not-allowed !important;
  transform: none !important;
  box-shadow: none !important;
}

// 移动端适配
@media (max-width: 768px) {
  .payment-dialog,
  .result-dialog {
    width: 95vw;
    margin: var(--spacing-md);
  }

  .dialog-content {
    padding: var(--spacing-md);
  }

  .payment-actions {
    flex-direction: column;

    .btn {
      width: 100%;
    }
  }

  .payment-method {
    padding: var(--spacing-sm);

    .method-info {
      .method-name {
        font-size: 0.9rem;
      }

      .method-desc {
        font-size: 0.8rem;
      }
    }
  }
}
</style> 